<template>
	<div class="swiper_pannel">
		<swiper v-if="type == 'home'" class="my-swipe" :options="swiperOption">
			<swiper-slide class="silde" v-for="banner in banners">
				<a v-bind:href="banner.adPic" target="view_window">
					<img :src='banner.adPic' placeholder="http://static.m.maizuo.com/v4/static/app/asset/3d2cdb3bd9a23609aa2d84e7c2bfd035.png" />
				</a>
			</swiper-slide>
		</swiper>
		<div v-if="type == 'login'">
			<img class="login_img" src='../../../../static/imgs/banner.png' />
		</div>
		<ion-content12 class="login_pannel_">
			<ion-loginpannel class="login_pannel"></ion-loginpannel>
		</ion-content12>
	</div>
</template>

<script>
	import {
		swiper,
		swiperSlide
	} from 'vue-awesome-swiper'
//	import loginPannel from './login_pannel'
	export default {
		name: 'swiper_pannel',
		data() {
			return {
				banners: [],
				swiperOption: {
					autoplayDisableOnInteraction: false,
					autoplay: 3000,
				}
			}
		},
		components: {
			swiper,
			swiperSlide,
//			loginPannel,
		}, //这里注册
		props: ['type'],
		methods: {},
		mounted() {
			var that = this;
			//获取banner
			this.lh_http('post', "showing/Banners", {}).done(function(res) {
				if(res.status) {
					console.log(res)
					that.banners = res.data.banners;
					console.log(that.banners)
				}
			})
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	.swiper_pannel {
		/*position: relative;*/
		z-index: 0;
		.my-swipe {
			img {
				height: 560px;
				width: 100%;
			}
		}
		.login_img {
			height: 560px;
			width: 100%;
		}
		.swiper-container {
			height: 560px;
			z-index: -1;
		}
		/********/
		.login_pannel_ {
			margin-top: -560px;
			height: 560px;
			position: relative;
		}
	}
</style>